<template>
	<view class="p-20px">
		<view class="mb-20px">活动设置</view>

		<view>
			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">活动标题:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.title" border="none" placeholder="请输入" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">推广标题:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.title2" border="none" placeholder="请输入" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">虚拟访问:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.xunifangwen" border="none" placeholder="请输入" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">虚拟人数:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.xunirenshu" border="none" placeholder="请输入" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">虚拟团数:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1">
					<uv-input v-model="state.xunituanshu" border="none" placeholder="请输入" class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">开始日期:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1" @click="openDateTime('start')">
					<uv-input v-model="state.startDateStr" readonly border="none" placeholder="请选择"
						suffixIcon='arrow-down' class="rounded-20px">
					</uv-input>
				</view>
			</view>

			<view class="flex flex-y-center px-20px py-20px mb-40px bg-white rounded-50px">
				<view class="w-140px text-28px text-center">结束日期:</view>
				<view class="line mr-20px mt-2px"></view>
				<view class="flex-1" @click="openDateTime('end')">
					<uv-input v-model="state.endDateStr" readonly border="none" placeholder="请选择"
						suffixIcon='arrow-down' class="rounded-20px">
					</uv-input>
				</view>
			</view>
		</view>

		<view class="remark text-24px px-20px py-5px rounded-10px">
			备注:员工姓名尽量不要重复，电话号码请输入手机号
		</view>
		<uv-datetime-picker ref="datetimePicker" v-model="state.date" mode="datetime" @confirm="setDateTime">
		</uv-datetime-picker>

		<view class="mt-40px">
			<uv-button text="提交" color="black" shape="circle"></uv-button>
		</view>
	</view>
</template>

<script setup name="ActivitySettings">
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue';

	const datetimePicker = ref()
	const state = reactive({
		title: '',
		title2: '',
		xunifangwen: '',
		xunirenshu: '',
		xunituanshu: '',
		date: Number(new Date()),
		dateType: 'start',
		startDate: null,
		startDateStr: null,
		endDate: null,
		endDateStr: null
	})

	const openDateTime = (type) => {
		datetimePicker.value.open()
		state.dateType = type
		if (state.startDate || state.endDate) {
			state.date = Number(state[type + 'Date'])
		}
	}

	const setDateTime = (e) => {
		state[state.dateType + 'Date'] = e.value
		state[state.dateType + 'DateStr'] = uni.$uv.timeFormat(e.value, 'yyyy-mm-dd hh-MM')
		if (state.dateType === 'start') {
			if (!state.endDate) {
				state.endDate = e.value
				state.endDateStr = uni.$uv.timeFormat(e.value, 'yyyy-mm-dd hh-MM')
			}
			if (state.startDate > state.endDate) {
				state.endDate = e.value
				state.endDateStr = uni.$uv.timeFormat(e.value, 'yyyy-mm-dd hh-MM')
			}
		} else if (state.dateType === 'end') {
			if (!state.startDate) {
				state.startDate = e.value
				state.startDateStr = uni.$uv.timeFormat(e.value, 'yyyy-mm-dd hh-MM')
			}
			if (state.startDate > state.endDate) {
				state.startDate = e.value
				state.startDateStr = uni.$uv.timeFormat(e.value, 'yyyy-mm-dd hh-MM')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgb(244, 243, 248);
	}

	.line {
		width: 1px;
		height: 40rpx;
		background: #dedede;
	}

	:deep(.uv-form-item__body__left__content__label) {
		justify-content: center !important;
	}

	.remark {
		color: rgb(225, 78, 133);
		background: rgb(255, 227, 239);
	}
</style>